<template>
  <div class="sou">
    <div class="hang">
      <div class="h1">
        <span class="iconfont icon-xiangzuo" @click="$router.go(-1)"></span>
        <span>搜索</span>
      </div>
      <div class="di">
        <span class="iconfont icon-gengduo"></span>
        <span class="gang">|</span>
        <span class="iconfont icon-iconfontcolor96"></span>
      </div>
    </div>
    <div class="hang2">
      <input type="text" placeholder="搜索商家、商品名称" v-model="shangname"/><span @click="sousu">搜索</span>
    </div>
    <div class="hang3">
        <div v-for="(item,index) in daohang" :key="index">
            <span>{{item.text}}</span>
            <span :class="item.icon"></span>
        </div>
    </div>
    <div class="rong">
      <div class="he" v-for="(i, j) in das" :key="j" @click="toDetail(i.mtWmPoiId)">
        <div class="p1"><img :src="i.picUrl" alt="" /></div>
        <div class="p2">
          <div class="ph1">
            <span>{{ i.name }}</span>
            <span class="iconfont icon-gengduo"></span>
          </div>
          <div class="ph2">
            <span class="iconfont icon-pingfen">4.5</span>
            <span>{{ i.monthSalesTip }}</span>
          </div>
          <div class="ph3">
            <span>{{ i.minPriceTip }}</span>
            <span>{{ i.shippingFeeTip }}</span>
            <span>{{ i.deliveryTimeTip }}</span>
            <span>{{ i.distance }}</span>
          </div>
          <div class="ph4">{{ i.wmPoiScore }}</div>
          <div class="ph5">
            <div class="zxc">
              <span
                v-for="(item, index) in i.discounts2"
                :key="index"
                class="cla"
                >{{ item.info }}</span
              >
            </div>
            <!-- <span class="iconfont icon-xiangxia"></span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shop_search } from "../api/index";
export default {
  data() {
    return {
      shangname: "",
      daohang:[
        {id:1,text:'综合排序',icon:'iconfont icon-xiangxia'},
        {id:2,text:'销量最高'},
        {id:3,text:'距离最近'},
        {id:4,text:'筛选',icon:'iconfont icon-fenxiang4'},
      ],
      das:[]
    };
  },
  methods:{
sousu(){
    shop_search({searchkey:this.shangname}).then((res)=>{
        console.log(res.data);
        console.log(this.shangname);
        this.das=res.data.list
    })
},
toDetail(id){
      this.$router.push('/xiangqing/'+id)
    }
  }
};
</script>

<style scoped>
.sou {
  padding: 0 10px;
}
.hang {
  display: flex;
  justify-content: space-between;
}
.hang .iconfont {
  font-size: 25px;
  margin: 10px;
  color: #138fe9;
}
.h1 {
  margin-top: 20px;
}
.h1 span:nth-child(2) {
  font-size: 24px;
  font-weight: bold;
}
.di {
  width: 100px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #eee;
  line-height: 40px;
  text-align: center;
  margin-top: 20px;
}
.gang {
  font-size: 20px;
  margin-bottom: 10px;
  color: #eee;
}
.hang2 {
  margin-top: 10px;
}
.hang2 input {
  width: 280px;
  height: 40px;
  background-color: #eee;
  border-radius: 15px;
  border: 0;
  padding: 0 20px;
  margin-left: 10px;
  font-size: 16px;
}
.hang2 span {
  font-size: 22px;
  margin-left: 10px;
  color: #138fe9;
}
.hang3{
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}
.hang3 span:nth-child(1){
    font-size: 20px;
}
.hang3 .iconfont{
    margin-left: 5px;
}
.rong{
  margin-top: 30px;
}
.he {
  height: 170px;
  background-color: ghostwhite;
  margin-top: 10px;
  display: flex;
}
.p1 {
  width: 100px;
  height: 100px;
}
.p2 {
  flex: 1;
  margin-left: 10px;
}
img {
  width: 100%;
}
.ph5 {
  display: flex;
}
.ph1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ph1 span:nth-child(1) {
  font-weight: bold;
  font-size: 16px;
}
.ph2 span:nth-child(1) {
  color: red;
}
.ph2 span {
  margin-right: 20px;
}
.ph3 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.ph3 span {
  margin-right: 14px;
}
.ph3 span:nth-child(4) {
  margin-right: 0px;
}
.cla {
  display: inline-block;
  background-color: darkorange;
  border-radius: 3px;
  color: white;
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>